<template>
    <!-- <div >
        <Button @click="ApiTest">Api测试</Button>
        <div style="margin-bottom: 10px;height:700px;overflow:auto">
            <pre>{{data}}</pre>
        </div>

        <div id="log" style="margin-top:10px;">
            <my-terminal :terminal="terminal" ref="xterm"></my-terminal>
        </div>

    </div> -->
    <div>
        <Button @click="ApiTest">Api测试</Button>
        <div style="height: 80%; background: #002833;">
            <div id="terminal" ref="terminal"></div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { Terminal } from "xterm";
import "xterm/css/xterm.css";
import "xterm/lib/xterm.js";
import {FitAddon} from 'xterm-addon-fit'

// import { post } from '@/api/http'

// import Console from './Console'

export default {
    data() {
        return {
            data: "",
            shellWs: "",
            term: "", // 保存terminal实例
            rows: 40,
            cols: 100,
            oldLen: 0,
        }
    },
    methods: {

        init_T(){
            let _this = this
            // 获取容器宽高/字号大小，定义行数和列数
            let term = new Terminal({
                rendererType: "canvas", //渲染类型
                rows: parseInt(_this.rows),
                cols: parseInt(_this.cols),
                convertEol: true, //启用时，光标将设置为下一行的开头
                //   scrollback: 50, //终端中的回滚量
                disableStdin: true, //是否应禁用输入。
                cursorStyle: "underline", //光标样式
                cursorBlink: true, //光标闪烁
                // theme: {
                //     foreground: "#000000", //字体
                //     background: "#ffffff", //背景色
                //     cursor: "help", //设置光标
                //     lineHeight: 16
                // }
            })
            term.open(this.$refs["terminal"])

            var fitAddon = new FitAddon()
            term.loadAddon(fitAddon);
            fitAddon.fit();

            window.addEventListener("resize",resizeScreen)
            function resizeScreen(){
                try {
                    fitAddon.fit()
                    term.onResize(()=>{
                        _this.onSend({ Op: "resize", Cols: term.cols, Rows: term.rows });
                    })
                }catch(e){
                    console.log("e", e.message);
                }
            }

            term._initialized = true;

            term.writeln("welcome to lgq terminal")

            _this.term = term

        },
        refresh(){
            let cluster_name = localStorage.getItem("currentCluster")
            let headers = {"cluster_name": cluster_name }
            let url = 'http://192.168.11.5:8082' + "/k8s"+"/get_pod_log" 

            axios({
                url:url,headers: headers,method:'post',responseType: 'text',timeout:30000
            }).then(response=>{
                // this.data = response.data

                let data = response.data
                // console.log("type:",typeof data)
                // this.term.writeln(data)
                let totalLen = data.length
                let newLen = totalLen-this.oldLen
                console.log("total:",totalLen,"old:",this.oldLen,"new:",newLen)
                // console.log(data.slice(totalLen-20,totalLen))
                let newData = data.slice(this.oldLen,totalLen)
                // console.log("newData:",newData)
                if(newLen > 0){
                    console.log("追加日志")
                    // this.term.writeln(data.slice(this.oldLen,newLen))
                    setTimeout(() =>{
                        this.term.writeln(newData)
                    },100); 
                    // this.term.writeln(newLenData)
                }
                this.oldLen = totalLen

                
                // this.$refs.xterm.fit()
            }).catch(error=>{
                console.log(error)
            })     
        },
        ApiTest() {
            // let cluster_name = localStorage.getItem("currentCluster")
            // let headers = {"cluster_name": cluster_name }
            // let url = 'http://192.168.11.5:8082' + "/k8s"+"/get_pod_log" 

            // axios({
            //     url:url,headers: headers,method:'post',responseType: 'text',timeout:30000
            // }).then(response=>{
            //     this.data = response.data
            //     console.log(this.data.length)
            //     console.log(this.data.slice(0,50))
            //     this.term.write(this.data)
            //     // this.$refs.xterm.fit()
            // })
            this.refresh()
            this.timer = setInterval(this.refresh, 10000);
        },

    },

    mounted: function() {
        // terminal初始化
        this.init_T()

    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
//     components: {
//         'my-terminal': Console
//     }
}
</script>
<style>

</style>